<template>
  <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pb-1">
    <div
      class="relative w-full rounded cursor-zoom-in group"
      :style="{
        backgroundColor: randomRGB(),
      }"
    >
      <img class="w-full rounded bg-transparent" :src="item.photo" alt="" />
      <!-- :style="{
          height: (width / item.photoWidth) * item.photoHeight + 'px',
        }" -->
      <div
        class="
          absolute
          hidden
          opacity-0
          w-full
          h-full
          bg-zinc-900/50
          top-0
          left-0
          rounded
          duration-300
          group-hover:opacity-100
          xl:block
        "
      >
        <!-- 分享 -->
        <x-button class="absolute top-1.5 left-1.5">分享</x-button>
        <!-- 点赞 -->
        <x-button
          class="absolute top-1.5 right-1.5"
          type="info"
          icon="heart"
          size="small"
          iconClass="fill-zinc-900  dark:fill-zinc-200"
        ></x-button>
        <!-- 下载 -->
        <x-button
          class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
          type="info"
          icon="download"
          iconClass="fill-zinc-900  dark:fill-zinc-200"
        ></x-button>
        <!-- 全屏 -->
        <x-button
          class="absolute bottom-1.5 right-1.5"
          type="info"
          icon="full"
          iconClass="fill-zinc-900  dark:fill-zinc-200"
        ></x-button>
      </div>
    </div>
    <!-- <p class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300">
      {{ item.title }}
    </p> -->
    <div class="flex items-center mt-1 px-1">
      <img :src="item.avatar" class="w-2 h-2 rounded-full" alt="" />
      <span class="text-sm text-zinc-500 ml-1">
        {{ item.author }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { randomRGB } from "@/utils/color.js";
defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  width: {
    type: Number,
  },
});
</script>

<style lang="scss" scoped>
</style>